<template>
	<view class="home" style="height: 100%;position: relative;">
		<view class="class-info" :style="{padding:bList.length!=0?'30rpx':'0'}" v-if="isToken && isTourist == false">
			<view>
				<!-- <view class="K" style="width: 100%;height: 1rpx;background: #EEF4F8;"></view> -->
				<view class="class-content mt20" v-if="bList.length !=0">
					<xyfc v-for="(item,index) in bList" :key="item.id" :imgList="item.imgList" :avatar="item.icon"
						:name="item.name" :publishTime="item.createTime" :content="item.content" :isLike="item.isLike"
						:isGiveReward="item.isGiveReward" :likeNumber="item.likeNumber" :item="item"
						:giveRewardNumber="item.giveRewardNumber" :chatNumber="item.plNum" :sourceShow="sourceShow"
						:sourceTitle="item.sourceTitle" :sourceImg="item.sourceImg" :sourceAuthor="item.sourceAuthor"
						:isLikeCnt="item.isLikeCnt" @clickDynamic="clickDynamic(index)" @clickUser="clickUser(item.id)"
						@clickDelete="clickDelete()" @clickThumbsup="clickThumbsup(item.id)" @xyfc="xyfc()"
						@clickGiveReward="clickGiveReward(item.id)" @clickChat="clickChat()" @clickFx="clickFx(item)"
						@clickSource="clickSource(id)">
					</xyfc>
				</view>
				<noData class="nodata" title="暂无记录" v-else></noData>
			</view>
		</view>
		<view class="box box-tb box-align-center box-pack-center pos-center" style="height: 100%;"
			v-else-if="isToken && isTourist">
			<noData title="还未绑定学校"></noData>
			<text style="color: #606266	;" @click="goBind">去绑定</text>
		</view>
		<view class="pos-center nodata box box-tb box-align-center box-pack-center" v-else>
			<view>登录查看更多内容</view>
			<u-button type="primary" @click="Login" :custom-style="customStyle">登录查看</u-button>
		</view>
		<view-tabbar></view-tabbar>
		<view class="uni_circle" @click="share" v-if="isToken && isTourist == false">
			<view class="uni_cirIcon">
				<u-icon name="plus" color="#fff" size="34" style="margin-right: 0;"></u-icon>
			</view>
		</view>
		<!-- 评论 -->
		<u-popup v-model="pLshow" mode="bottom" height="70%" @close="close">
			<view class="chart-cont">
				<view class="chart-top">
					<view class="chart-cnt">
						{{plNum}}条评论
					</view>
					<u-icon name="close" @click="close"></u-icon>
				</view>
				<view class="chart-bottom">
					<view class="" v-for="(item,im) in pinglunlist" :key="im">
						<view class="user__container" :style="'display: '+userDisplay+';'">
							<view class="user__header-warp">
								<view class="user__header" @click.stop="clickUser()">
									<image class="user__header-image" :src="item.icon" mode="aspectFill"></image>
								</view>
							</view>
							<view class="user__content">
								<view class="user__content-main">
									<text class="user__content-title uni-ellipsis" @click.stop="clickUser()"
										style="font-size: 11px;">{{item.name }}</text>
									<text class="user__content-note uni-ellipsis">{{item.pubTime}}</text>
								</view>
							</view>
						</view>
						<view class="texts">{{item.content}}</view>
					</view>
				</view>
				<view class="chart-input" :style="'bottom:'+KeyboardHeight+'px;'">
					<textarea v-model="chartText" placeholder="留下你的精彩评论吧" :adjust-position="true"
						@focus="textareaFocus()" />
					<view @click="clickSend()" class="send-btn">评论</view>
				</view>
			</view>
		</u-popup>
		<!--待办驳回原因和审核人-->
		<u-popup v-model="regshow" mode="center" @close="close">
			<view class="chart-cont">
				<view class="chart-top">
					<view class="chart-cnt">
						驳回原因
					</view>
					<u-icon name="close" @click="close"></u-icon>
				</view>

				<view class="chart-bot" :style="'bottom:'+KeyboardHeight+'px;'">
					<view class="chart-ipt">
						<textarea v-model="regtext" maxlength="100" required placeholder="请输入你的驳回信息"
							:adjust-position="true" @focus="textareaFocus()" @input="checktextarea" />
					</view>
					<button type="primary" @click="regSend(sendid)" class="send-bttn">确定</button>
				</view>
			</view>
		</u-popup>
		<!-- 分享 -->
		<u-popup v-model="fxShow" mode="bottom" height="300px" border-radius="24" @close="handleClose">
			<u-form :model="form" ref="uForm" :label-width="180" label-align="right">
				<u-form-item label="分享标题">
					<u-input v-model="fxTitle" />
				</u-form-item>
				<u-form-item label="分享图片">
					<u-upload :action="action" :file-list="fileList" :max-count="1" :multiple="false"
						:show-progress="false" @on-uploaded="onuploaded" ref="uUpload">
					</u-upload>
				</u-form-item>
			</u-form>

			<view class="box box-tb box-align-center fx">
				<view class="box box-align-center">
					<view class="mr10 ml10 box box-tb box-align-center" @click="handleShare()">
						<button open-type="share">
							<u-image width="45px" height="45px"
								src="https://yhykt.oss-cn-beijing.aliyuncs.com/E9B1158464424528B120E668941BC48Cafead635b3db8e9599d7445a2997769.png?Expires=4809034324&OSSAccessKeyId=LTAI4Fgsq7J3XQi7e2SRfzjJ&Signature=JNUIIK%2BU73Ee65XW1RniWCQsYX0%3D">
							</u-image>
							<view style="font-size: 14px;">分享到微信</view>
						</button>
					</view>
				</view>
			</view>

		</u-popup>
		<!-- 删除 -->
		<u-action-sheet :list="list" v-model="deleteShow" @click="comfirm()"></u-action-sheet>
		<u-toast ref="uToast" />
		<u-modal v-model="showdel" title="确认删除" content="确认删除？" @confirm="confirmdel" show-cancel-button=true>
		</u-modal>
		<bind-mobile :show="BindShow" @handleClose="handleClose"></bind-mobile>
	</view>
</template>

<script>
	import mixinDevice from "@/common/mixins.js"
	import xyfc from './components/xyfc.vue'; //校园风采
	export default {
		mixins: [mixinDevice],
		components: {
			xyfc
		},
		data() {
			return {
				value1: 1,
				options1: [],
				customStyle: {
					marginTop: '67rpx',
					width: '260rpx',
					height: '90rpx',
					background: '#3541F3',
					boxShadow: '0rpx 8rpx 27rpx 0rpx rgba(53,65,243,0.21)',
					borderRadius: '20rpx'
				},
				action: this.$api.baseUrl + '/upload/uploadfile',
				fxShow: false,
				fxImage: '',
				fxTitle: '',
				fileList: [],
				regtext: '',
				reglist: [],
				regshow: false,
				listj: [],
				hj: [2, 1], //徽标数偏移量
				schoolInfo: {
					zyNum: 0,
					classNum: 0,
					trNum: 0,
					stuNum: 0
				},
				plNum: 0,
				pLshow: false,
				refresher: true,
				isRefreshing: false, // 是否在刷新中
				infiniteDisabled: false, // 是否禁用上拉加载
				triggered: true,
				user: uni.getStorageSync('user'),
				currSchool: uni.getStorageSync('currSchool'),
				role: uni.getStorageSync('role'),
				bj: '',
				wpyNum: 0,
				page: {
					total: 0,
					pageSize: 10,
					pageNum: 1,
					pages: 1,
					list: []
				},
				zcsq: {
					total: 0,
					pageSize: 5,
					pageNum: 1,
					pages: 1,
					list: []
				},
				bList: [],
				show: false,
				status: 'loadmore',
				regstatus: 'loadmore',
				pinglunlist: [],
				chartText: '',
				chartId: '',
				deleteShow: false,
				showdel: false,
				list: [{
					text: '删除'
				}],
				loading: false,
				tablist: [{
						name: '校园风采'
					},
					{
						name: '待办',
						cate_count: 0
					},
					// {name: '学情报告'},
				],
				current: 0,
				sendid: '',
				loadText: {
					loadmore: '点击加载更多',
					loading: '加载中',
					nomore: '没有更多了'
				},
			}
		},
		onShow() {
			if (this.isToken) {
				if (this.isTourist == false) {
					this.loading = true;
					this.getSchoolInfo(); //统计信息
					this.xyfc();
				}

			}
		},
		watch: {
			value1(newValue) {
				this.selectedText = newValue
			}
		},

		onPullDownRefresh() {
			uni.stopPullDownRefresh();
			this.page.pageNum = 1
			this.xyfc()
		},
		onReachBottom() {
			if (this.page.pageNum < this.page.pages) {
				this.page.pageNum += 1
				this.xyfc()
			}
		},
		onShareAppMessage(res) {
			return {
				title:this.fxTitle,
				path: '/pages/index/share?data=' + encodeURIComponent(JSON.stringify(uni.getStorageSync('chat_info'))),
				imageUrl: this.fxImage,
				success: res => {
					this.fxShow = false
					console.log(res);
					// 转发成功
					uni.showToast({
						title: "分享成功",
						icon: 'success',
						duration: 2000
					})
				},
				fail: res => {
					console.log(res);
					// 分享失败
				},
			}
		},

		methods: {
			share() {
				uni.navigateTo({
					url: '/pageHome/pubClassStyle'
				})
			},
			onuploaded(lists, name) {
				this.fxImage = lists[0].response.body.data.url;
			},
			clickFx(item) {
				console.log(item, '分享')
				uni.setStorageSync('chat_info', item);
				this.fileList = [];
				this.fxShow = true;
				if (item.conts.length != 0) {
					if (item.conts[0].fileSuffix == 'mp4') {
						this.fxImage = item.conts[0].firstFrame;
					} else {
						this.fxImage = item.conts[0].url;
					}
				} else {
					this.fxImage =
						'https://yhykt.oss-cn-beijing.aliyuncs.com/6B5EEFF0D4134B8F8D4DDCCBD49CF51C11111.png?Expires=4809066847&OSSAccessKeyId=LTAI4Fgsq7J3XQi7e2SRfzjJ&Signature=CWwAt7IZtgcT6uzYesjOvsFotPM%3D'
				}
				this.fxTitle = item.title
				//存储title 
				uni.setStorageSync('fxTitle', this.fxTitle)

				this.fileList.push({
					url: this.fxImage
				})
			},
			//通过事件
			clickadop(adopid) {
				let _this = this;
				wx.showModal({
					title: '审核',
					content: '请确认是否审核通过',
					confirmText: '确定',
					confirmColor: '#1890FF',
					success(res) {
						if (res.confirm) {
							wx.showToast({
								title: '操作成功',
								icon: 'success',
							})
							//通过接口改变数据中的状态
							let params = {
								id: adopid,
								approvor: _this.user.name,
								approvoruserid: _this.user.id
							}
							_this.$api.post({
								url: '/ytodo/passtodo'
							}, params).then(res => {
								_this.getApplys()
							})
						} else if (res.cancel) {
							wx.showToast({
								title: '取消操作',
								icon: 'error',
							})
						}
					}
				})
			},
			//打开驳回弹窗
			clickbo(boid) {
				this.regshow = true;
				this.sendid = boid;
			},
			//校检输入的驳回原因
			checktextarea() {
				if (this.regtext == '') {
					this.$refs.uToast.show({
						title: '字数限制0~100之内且不为空',
						type: 'default'
					})
				}
			},
			//发送驳回原因和审核人姓名给注册人
			//获取子组件中的id
			regSend(sendid) {
				let _this = this;
				if (_this.regtext != '') {
					_this.regshow = false;
					let params = {
						id: sendid,
						reason: _this.regtext,
						approvor: _this.user.name,
						approvoruserid: _this.user.id
					}
					//驳回接口改变数据中的状态	
					this.$api.post({
						url: '/ytodo/reject'
					}, params).then(res => {
						this.getApplys();
						_this.regtext = ''
					})
				} else {
					this.$refs.uToast.show({
						title: '字数限制0~100之内且不为空',
						type: 'default'
					})
				}
			},
			//tab页的id
			change(index) {
				this.current = index;
			},
			//--------------------------------------
			getSchoolInfo() {
				this.$api.post({
					url: '/yschool/schoolInfo'
				}, {
					schoolid: this.currSchool.id
				}).then(res => {
					if (res.code == 0) {
						this.schoolInfo = res.info;
					}

				})
			},
			onRefresh(e) {
				this.$refs.child.refresherComplete()
			},
			//下拉刷新数据
			setData() {
				console.log('刷新');
				this.bj = uni.getStorageSync('clazz')
				this.xyfc(); //刷新校园风采
				this.getSchoolInfo();
				this.getApplys();
			},
			fenye() {
				if (this.page.pageSize <= this.page.total) {
					this.status = 'loading';
					this.page.pageSize += 10;
					this.xyfc()
					this.regfenye();
				}
			},
			regfenye() {
				if (this.zcsq.pages >= this.zcsq.pageNum) {
					this.regstatus = 'loading';
					this.zcsq.pageSize = this.zcsq.pageSize + 5;
					this.getApplys();
				}
			},
			//查询校园风采列表
			xyfc() {
				if (this.page.pageNum == 1) {
					this.bList = []
				}
				// console.log('>>query 校园风采')
				let params = {
					userid: this.user.id,
					schoolid: this.currSchool.id,
					pageNum: this.page.pageNum,
					pageSize: this.page.pageSize
				};
				this.$api.post({
					url: '/ybjq/xyfcList',
					method: 'post'
				}, params,true).then(res => {
					if (res.code == `0`) {
						if (this.page.pageNum == 1) {
							this.bList = res.list.list
						} else {
							this.bList = [...this.bList, ...res.list.list]
						}
						this.page.pages = res.list.pages
					}
				}).catch(error => {})
			},
			getApplys() {
				let params = {
					userid: this.user.id,
					pageNum: this.zcsq.pageNum,
					pageSize: this.zcsq.pageSize,
				}
				//数据接口
				this.$api.post({
					url: '/ytodo/pagelist'
				}, params).then(res => {
					if (res.code == 0) {
						this.loading = false;
						this.isRefreshing = false
						this.$refs.child.refresherComplete();
						uni.stopPullDownRefresh();
						this.listj = res.page.list
						this.tablist[1].cate_count = res.page.total
						this.zcsq = {
							pageNum: res.page.pageNum,
							pageSize: res.page.pageSize,
							total: res.page.total,
							pages: res.page.pages
						}
					}
					this.regstatus = 'loadmore';
					if (this.zcsq.pageNum == this.zcsq.pages) {
						this.regstatus = 'nomore'
					}
				}).catch(error => {
					this.isRefreshing = false
					this.$refs.child.refresherComplete()
				})
			},
			goKc() {
				wx.vibrateShort();
				//检查当前学校  当前学期是否发布教学计划
				this.$api.post({
					url: '/yteachplan/chkPlan'
				}, {
					schoolid: this.currSchool.id
				}).then(res => {
					if (res.ispub == 'yes') {
						uni.navigateTo({
							url: '/team/kc/kcView'
						})
					} else {
						this.$refs.uToast.show({
							title: '未发布课程任务！\r\n请登录五育通平台\r\n https://www.yhmle.com\r\n 【劳动课程/课程任务】进行发布',
							type: 'warning',
							duration: '3000'
						})
					}
				})
			},
			goSj() {
				wx.vibrateShort();
				//检查当前学校  当前学期是否发布教学计划
				uni.navigateTo({
					url: '/team/sj/sjView'
				})
				this.$api.post({
					url: '/yteachplan/chkPlan'
				}, {
					schoolid: this.currSchool.id
				}).then(res => {
					if (res.ispub == 'yes') {
						uni.navigateTo({
							url: '/team/sj/sjView'
						})
					} else {
						this.$refs.uToast.show({
							title: '未发布实践任务！\r\n请登录五育通平台\r\n https://www.yhmle.com\r\n 【实践清单】进行发布',
							type: 'warning',
							duration: '3000'
						})
					}
				})
			},
			goScoreGroup() {
				uni.navigateTo({
					url: '/pageHome/scoreGroup'
				})
			},
			clickDynamic(e) {},
			// 点击用户信息
			clickUser(e) {
				console.log(e);
			},
			// 点击删除
			clickDelete(e) {
				console.log(e);
				// this.bList = [];
				this.chartId = e
				this.deleteShow = true
			},
			// 点赞
			clickThumbsup(e) {},
			// 点击打赏
			clickGiveReward(e) {},
			// 点击聊天
			clickChat(e) {
				this.pLshow = true
				this.chartId = e
				console.log(`>>>${e}`);
				this.$api.post({
					url: '/ybjqpl/pagelist',
					method: 'post'
				}, {
					bjqid: this.chartId
				}).then(res => {
					if (res.code == 0) {
						this.pinglunlist = res.list.list;
						this.plNum = res.list.total
					}
				})
			},
			// 点击原连接
			clickSource(e) {},
			//切换班级
			goClass() {
				wx.vibrateShort();
				uni.navigateTo({
					url: "/team/kc/changeSchool"
				})
			},
			close() {
				this.pLshow = false
				this.regshow = false //注册申请
				this.xyfc()
			},
			textareaFocus() {
				wx.onKeyboardHeightChange(res => {
					// console.log(res);
					uni.showToast({
						title: res
					})
					this.KeyboardHeight = res.height
				})
			},
			clickSend() {
				console.log(`>>>>${this.chartId}`);
				wx.vibrateShort();
				this.$api.post({
					url: '/comm/chkWords',
					method: 'post'
				}, {
					cont: this.chartText
				}).then(res => {
					if (res.risky == true) {
						this.$refs.uTips.show({
							title: '检测到违规内容，请重新编辑！',
							type: 'warning',
							duration: '2500'
						});
						this.chartText = "";
					}
					if (this.chartText != '') {
						this.$api.post({
							url: '/ybjqpl/add',
							method: 'post'
						}, {
							cont: this.chartText,
							bjqId: this.chartId,
							createUser: this.user.id
						}).then(res => {
							if (res.code == 0) {
								this.clickChat(this.chartId);
								this.chartText = "";
							}
						})
					} else {
						this.$refs.uToast.show({
							title: '评论不能为空',
							type: 'info'
						})
					}
				})

			},
			comfirm(index) {
				this.showdel = true;
			},
			confirmdel() {
				console.log(this.chartId);
				this.$api.post({
					url: '/ybjq/delBjq',
					method: 'post'
				}, {
					id: this.chartId
				}).then(res => {
					if (res.code == "0") {
						this.$refs.uToast.show({
							title: '已删除',
							type: 'success',
							duration: '1500'
						});
						this.xyfc()
					}
				})
			},
			tozy() {
				wx.vibrateShort();
				uni.navigateTo({
					url: '/team/zy/main'
				})
			},
			tobj() {
				wx.vibrateShort();
				uni.navigateTo({
					url: '/team/bj/main'
				})
			},
			totr() {
				wx.vibrateShort();
				uni.navigateTo({
					url: '/team/tr/main'
				})
			},
			tostu() {
				wx.vibrateShort();
				uni.navigateTo({
					url: '/team/stu/main'
				})
			},
			handleShare() {
				uni.setStorageSync('fxTitle', this.fxTitle);
				uni.setStorageSync('fxImage', this.fxImage)
				let files = [];
				files = this.$refs.uUpload.lists;
				console.log(files)
			},
		}
	}
</script>

<style scoped lang="scss">
	/deep/ .u-dropdown__menu__item__text.data-v-01c0c507 {
		white-space: nowrap !important;
		overflow: hidden;
		width: 155rpx;
	}

	/deep/ .u-dropdown__menu__item__text {
		// white-space: nowrap !important;
		// overflow: hidden;
		width: 0rpx;
	}

	.uni_circle {
		position: fixed;
		right: 50rpx;
		top: 80%;
		width: 108rpx;
		height: 72rpx;
		background: linear-gradient(43deg, #6176FE, #5155F9);
		box-shadow: 2rpx 8rpx 43rpx 0rpx rgba(42, 47, 203, 0.22);
		border-radius: 36rpx;
		// text-align: center;
		display: flex;
		justify-content: center;
		align-items: center;

		.uni_cirIcon {}
	}

	.logo {
		width: 80rpx;
		height: 80rpx;
		border-radius: 50%;
		overflow: hidden;

		.img {
			margin-left: -5rpx;
		}
	}

	.home {
		position: relative;
		width: 100%;

		.class-info {
			width: 100%;
			background-color: #fff;

			// min-height: calc(100% - 520rpx);
			// height: auto;

			.nodata {
				position: absolute;
				left: 50%;
				top: 50%;
				transform: translate(-50%, -50%);
				height: 260rpx !important;
			}

		}


	}

	.bar {
		margin-top: -20rpx;
		display: flex;
		align-items: center;
		padding-left: 50rpx;
	}

	.ml50 {
		margin-left: 20rpx;
	}


	.chart-cont {
		position: relative;
	}

	.chart-top {
		// position: fixed;
		width: 100%;
		height: 100rpx;
		display: flex;
		justify-content: space-around;
		align-items: center;
		background-color: #fff;
		// z-index: 100;
		/* border-bottom: 2rpx solid #C0C0C0; */
	}

	.chart-bottom {
		padding: 100rpx 0 120rpx;
	}

	.chart-input {
		width: 100%;
		height: 120rpx;
		position: fixed;
		bottom: 0;
		background-color: #fff;
		display: flex;
		justify-content: space-around;
		align-items: center;
		border-top: 2rpx solid #C0C0C0;
	}

	.chart-input textarea {
		box-sizing: border-box;
		padding: 43rpx 0 0 20rpx;
		width: 560rpx;
		height: 100%;
	}

	.send-btn {
		width: 100rpx;
		height: 120upx;
		line-height: 120upx;
		margin-left: 16upx;
	}

	u-icon {
		margin-right: 20rpx;
	}

	.chart-cnt {
		width: 610rpx;
		text-align: center;
	}

	.chart-bot {
		position: relative;
		margin: 0 auto;
		width: 560rpx;
		height: 300rpx;
	}

	.chart-ipt {
		width: 560rpx;
		height: 200rpx;

	}

	.chart-ipt textarea {
		width: 560rpx;
		height: 100%;
		box-sizing: border-box;
	}

	.send-bttn {
		font-size: 20rpx;
		position: absolute;
		width: 100rpx;
		height: 73upx;
		line-height: 73upx;
		margin: 16upx;
		right: 0;
		bottom: 0;
	}

	.user__container {
		display: flex;
		-webkit-box-orient: horizontal;
		-webkit-box-direction: normal;
		/* -webkit-flex-direction: row; */
		flex-direction: row;
		-webkit-box-flex: 1;
		/* -webkit-flex: 1; */
		flex: 1;
		padding: 14upx 18upx;
		position: relative;
		overflow: hidden;
	}

	.user__header {
		display: flex;
		width: 80upx;
		height: 80upx;
		-webkit-border-radius: 80upx;
		border-color: #eee;
		border-width: 1upx;
		border-style: solid;
		overflow: hidden;
		border-radius: 80upx;
	}

	.user__header-image {
		display: flex;
		align-content: center;
		-webkit-box-orient: horizontal;
		-webkit-box-direction: normal;
		flex-direction: row;
		-webkit-box-pack: center;
		justify-content: center;
		-webkit-box-align: center;
		align-items: center;
		flex-wrap: wrap-reverse;
		width: 80upx;
		height: 80upx;
		border-radius: 80upx;
		border-color: #eee;
		border-width: 1upx;
		border-style: solid;
		overflow: hidden;
	}

	.user__content {
		display: flex;
		-webkit-box-orient: horizontal;
		-webkit-box-direction: normal;
		flex-direction: row;
		-webkit-box-flex: 1;
		flex: 1;
		overflow: hidden;
		padding: 4upx 0;
	}

	.user__content-main {
		display: -webkit-box;
		display: -webkit-flex;
		display: flex;
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		-webkit-flex-direction: column;
		flex-direction: column;
		-webkit-box-pack: justify;
		-webkit-justify-content: space-between;
		justify-content: space-between;
		padding-left: 14upx;
		-webkit-box-flex: 1;
		-webkit-flex: 1;
		flex: 1;
		overflow: hidden;
	}

	.user__content-note {
		margin-top: 3px;
		color: #999;
		font-size: 24upx;
		font-weight: normal;
		overflow: hidden;
	}

	.texts {
		padding-left: 11%;
		margin: 1% 3% 2%;
	}

	.nodata {
		color: #b4b4b4;
	}

	.changeimg {
		position: absolute;
		z-index: 1;
		left: 4px;
		background: rgba(176, 219, 255, .4);
		border-radius: 4px;
		padding: 1px 2px 4px 2px;
	}

	.newtask {
		background-color: #ff0004;
		color: #FFFFFF;
		border-radius: 20px;
		padding: 2px;
		position: absolute;
		z-index: 1;
		left: 50px;
	}

	.xnxq {
		position: absolute;
		font-size: 10px;
		right: 30px;
		top: 30px;
	}

	.fx button {
		display: flex;
		flex-direction: column;
		align-items: center;
		background-color: #fff;
	}

	/deep/ .fx button::after {
		border: none;
	}

	.share {
		position: fixed;
		right: 50rpx;
		bottom: 300px;
		width: 108rpx;
		height: 72rpx;
		background: linear-gradient(43deg, #6176FE, #5155F9);
		box-shadow: 2rpx 8rpx 43rpx 0rpx rgba(42, 47, 203, 0.22);
		border-radius: 36rpx;
		color: #fff;
	}
</style>